<template>
    <div class="main-container">
        <ad-left v-if='$store.state.isPc'></ad-left>
        <div class="main">
            <el-row :gutter="20">
                <el-col :lg='16' :sm='24' class="choose-type">
                    <!-- 第一步 -->
                    <div class="form step-one" v-if='step == 1'>
                        <h1 class="center">發佈廣告</h1>
                        <el-radio-group v-model="formData.ad_type" class="ad-type-radio">
                            <el-radio :label="1">
                                <div class="type-info">
                                    <h2>場外交易</h2>
                                    <p>使用當地法幣買賣數位資產。</p>
                                    <p>通常使用銀行轉帳、網上轉帳（如支付寶、微信、PayPal等）完成支付。</p>
                                </div>
                            </el-radio>
                            <el-radio :label="2">
                                <div class="type-info">
                                    <h2>擔保交易</h2>
                                    <p>使用數位資產擔保兌換法幣。</p>
                                    <p>通常使用銀行轉帳、網上轉帳（如支付寶、微信、PayPal等）完成支付。</p>
                                </div>
                            </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 第二步 -->
                    <template v-if='step == 2'>
                        <div class="form step-one" v-if='formData.ad_type == 1'>
                            <h1 class="center">發佈購買廣告</h1>
                            <!-- <el-steps :active="1" align-center>
                                <el-step  description="设置广告类型">1</el-step>
                                <el-step  description="设置广告报价">2</el-step>
                                <el-step  description="设置广告留言">3</el-step>
                            </el-steps> -->
                            <!-- <el-alert
                                title=""
                                type="error"
                                :closable="false"
                                effect="dark">
                                您的錢包餘額不足0.02 BTC，廣告將無法正常展示，請立即充幣。
                            </el-alert> -->
                            <!-- 设置广告类型 -->
                            <div class="step-item">
                                <h1>選擇廣告類型</h1>
                                <div class="ad-type-select">
                                    <!-- 购买/出售 -->
                                    <el-select v-model="formData.record_type" >
                                        <el-option label="我要購買" :value="1"></el-option>
                                        <el-option label="我要出售" :value="2"></el-option>
                                    </el-select>
                                    <!-- 币种 -->
                                    <el-select v-model="formData.coin_id" >
                                        <el-option 
                                            :label="item.title" 
                                            :value="item.id" 
                                            v-for='item in $store.state.coin' 
                                            :key='item.id'></el-option>
                                    </el-select>
                                    <!-- 法币 -->
                                    <el-select v-model="formData.currency_id" @change='currencyChange'>
                                        <el-option 
                                            :label="item.title" 
                                            :value="item.id" 
                                            v-for='item in $store.state.currency' 
                                            :key='item.id'></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="step-item">
                                <h1>選擇國家/地區（您希望廣告展示在哪個國家？）</h1>
                                <el-select v-model="formData.nation_id" >
                                    <el-option 
                                        :label="item.title" 
                                        :value="item.id" 
                                        v-for='item in $store.state.nation' 
                                        :key='item.id'></el-option>
                                </el-select>
                            </div>
                            <div class="step-item" style="margin-bottom: 15px;">
                                <h1>選擇支付方式（最多選擇3個）</h1>
                                <el-checkbox-group v-model="formData.pay_type" @change='checkPayType'>
                                    <el-checkbox :label="item.id" v-for='item in $store.state.payment' :key='item.id'>
                                        <div class="f-s">
                                            <img :src="item.icon" alt="" style='width:15px; margin-right : 5px;'>
                                             {{item.title}}
                                        </div>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div class="step-item" style="margin-bottom: 15px;">
                                <h1>是否限制交易</h1>
                                <el-radio-group v-model="formData.is_auth">
                                    <el-radio :label="1">僅限實名認證可交易</el-radio>
                                    <el-radio :label="0">全部</el-radio>
                                </el-radio-group>
                            </div>
                            
                            <div class="step-item">
                                <h1>單價</h1>
                                <el-input v-model="formData.price"  placeholder="請輸入單價">
                                    <template slot="append">{{cnyBuffer}}</template>
                                </el-input>
                            </div>
                            <div class="step-item" >
                                <h1>最小交易金額</h1>
                                <el-input v-model="formData.min_money"  placeholder="請輸入最小交易金額">
                                    <template slot="append">{{cnyBuffer}}</template>
                                </el-input>
                            </div>
                            <div class="step-item" >
                                <h1>最大交易金額</h1>
                                <el-input v-model="formData.max_money"  placeholder="請輸入最大交易金額">
                                    <template slot="append">{{cnyBuffer}}</template>
                                </el-input>
                            </div>
                            <div class="step-item" >
                                <h1>付款期限</h1>
                                <el-input v-model="formData.trade_limit"  placeholder="請輸入付款期限">
                                    <template slot="append">分鐘</template>
                                </el-input>
                            </div>
                            <div class="step-item" >
                                <h1>交易條款</h1>
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 6}"
                                    placeholder="請輸入交易条款"
                                    v-model="formData.trade_content">
                                </el-input>
                            </div>
                        </div>
                        <div class="form step-two" v-else>
                            <h1 class="center">發佈擔保交易廣告</h1>
                            <div class="step-item">
                                <h1>擔保幣</h1>
                                <el-select v-model="formData.coin_id" disabled>
                                    <el-option 
                                        label="USDT" 
                                        :value="1" 
                                        
                                        ></el-option>
                                </el-select>
                            </div>
                            <div class="step-item">
                                <h1>目標法幣</h1>
                                <el-select v-model="formData.currency_id" @change='currencyChange'>
									<el-option 
										:label="item.title" 
										:value="item.id" 
										v-for='item in $store.state.currency' 
										:key='item.id'></el-option>
								</el-select>
                            </div>
                            <div class="step-item">
                                <h1>提供法幣</h1>
                                <el-select v-model="formData.cur_currency_id" @change='curCurrencyChange'>
                                        <el-option 
                                            :label="item.title" 
                                            :value="item.id" 
                                            v-for='item in $store.state.currency' 
                                            :key='item.id'></el-option>
                                    </el-select>
                            </div>
                            <div class="step-item">
                                <h1>選擇國家/地區（您希望廣告展示在哪個國家？）</h1>
                                <el-select v-model="formData.nation_id" >
                                    <el-option 
                                        :label="item.title" 
                                        :value="item.id" 
                                        v-for='item in $store.state.nation' 
                                        :key='item.id'></el-option>
                                </el-select>
                            </div>
                            <div class="step-item" style="margin-bottom: 15px;">
                                <h1>選擇支付方式（最多選擇3個）</h1>
                                <el-checkbox-group v-model="formData.pay_type" @change='checkPayType'>
                                    <el-checkbox :label="item.id" v-for='item in $store.state.payment' :key='item.id'>
                                        <div class="f-s">
                                            <img :src="item.icon" alt="" style='width:15px; margin-right : 5px;'>
                                             {{item.title}}
                                        </div>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div class="step-item" style="margin-bottom: 15px;">
                                <h1>是否限制交易</h1>
                                <el-radio-group v-model="formData.is_auth">
                                    <el-radio :label="1">僅限實名認證可交易</el-radio>
                                    <el-radio :label="0">全部</el-radio>
                                </el-radio-group>
                            </div>
                            <div class="step-item" v-if='formData.cur_currency_id'>
                                <h1>目標金額 （<span class="red">您要兌換的金額：{{formData.cur_price}}</span>）</h1>
                                <el-input v-model="formData.price" type='number' @change='targetNumberChange'>
									<template slot="append">{{cnyBuffer}}</template>
								</el-input>
                               
                            </div>
                            <div class="step-item" >
                                <h1>付款期限</h1>
                                <el-input v-model="formData.trade_limit"  placeholder="請輸入付款期限">
                                    <template slot="append">分鐘</template>
                                </el-input>
                            </div>
                            <div class="step-item" >
                                <h1>交易條款</h1>
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 6}"
                                    placeholder="請輸入交易条款"
                                    v-model="formData.trade_content">
                                </el-input>
                            </div>
                        </div>
                    </template>
                    
                    <div class="next center">
                        <el-button type="default" @click='preStep' :disabled="step <= 1">上一步</el-button>
                        <el-button type="primary" @click='nextStep' v-if='step == 1'>下一步</el-button>
                        <el-button type="primary"  v-if='step == 2' @click="submitAD">發佈廣告</el-button>
                    </div>
                </el-col>
                <el-col :lg='7' v-if='$store.state.isPc'>
                    <div class="shuo-ming">
                        <h1>說明</h1>
                        <p>1. 發佈廣告是免費的；</p>
                        <p>2. 廣告成交後，每筆交易需支付0.7%的手續費（以交易區的實際費率為准）；</p>
                        <p>3. 錢包餘額達到要求，廣告才能正常展示；</p>
                    </div>
                    <el-table 
                        border
                        :header-cell-style="{background : '#E5F2FF'}"
                        :data='$store.state.coin'>
                        <el-table-column label='幣種' prop='code'>
                        </el-table-column>
                        <el-table-column label='購買廣告' prop='ad_buy_limit'></el-table-column>
                        <el-table-column label='出售廣告' prop='ad_sell_limit' ></el-table-column>
                    </el-table>
                    <div class="shuo-ming">
                        <p>4. 錢包餘額低於要求，或低於您設定的最小交易限額，廣告會下架；</p>
                        <p>5. 任何下架的廣告，都需要您手動操作上架。</p>
                    </div>
                </el-col>
            </el-row>  
        </div>
    </div>
</template>

<script>
    import AdLeft from '@c/AdLeft'
    import PayType from '@c/PayType'
    import {CreateAd, GetRate} from '@/api/ad'
    export default {
        components: {
            AdLeft,
            PayType
        },
        data() {
            return {
                activeName : 'first',
                table : null,
                radio : 1,
                step : 1,
                checkList : [],
                rate : 0,
                tipPrice : 0,
                formData : {
                    ad_type : 1,//交易类型，1场外交易，2担保交易
                    record_type : 1,//1购买，2 出售
                    coin_id : 1,//币种id
                    currency_id : 1,//法币id
                    cur_currency_id : null,//提供的法币id
                    nation_id : 1,//国家id
                    pay_type : [],//付款方式类型id数组
                    price : null,//交易单价
                    cur_price : 0,
                    min_money : 50,//最小交易金额
                    max_money : 1000,//最大交易金额
                    trade_limit : 15,//交易限时
                    trade_content : null,//交易条款
                    is_auth : 1,//1为实名认证可交易，0为全部可交易
                },
				cnyBuffer : 'CNY'
            };
        },
        methods :{
            tabClick () {

            },
			currencyChange (e) {
				let _v = null;
				
				this.$store.state.currency.map(item => {
					if (item.id == e) {
						_v = item.code
					}
				})
				this.cnyBuffer = _v;
				// console.log()
			},
            nextStep () {
                if (this.step >= 2) {
                    return;
                }
                this.step += 1;
            },
            preStep () {
                if (this.step <= 1) {
                    return;
                }
                this.step -= 1;
            },
            checkPayType () {
                if(this.formData.pay_type.length > 3) {
                    this.$alert('最多只能選擇3種支付方式', '提示', {
                        callback :() => {   
                            this.formData.pay_type = this.formData.pay_type.splice(0,3)
                        }
                    })
                }
            },
            curCurrencyChange () {
                if (this.formData.currency_id == this.formData.cur_currency_id) {
                    this.$alert('提供法幣不可與目標法幣一樣', '提示', {
                        callback :() => {   
                            this.formData.cur_currency_id = null
                        }
                    })
                    return;
                }
                GetRate(this.formData).then(res => {
                    this.rate = res.result.rate;
                })
            },
            targetNumberChange () {
                let numberReg = /^[0-9]+.?[0-9]*$/


                if (!numberReg.test(this.formData.price)) {
                    this.$alert('請輸入合法的單價', '提示')
                    return;
                }
                this.formData.cur_price = (this.formData.price / this.rate).toFixed(2)
            },
            submitAD () {
                if (!this.formData.cur_currency_id && this.formData.ad_type == 2) {
                    this.$alert('請選擇提供法幣', '提示')
                    return;
                }
                if (!this.formData.pay_type || !this.formData.pay_type.length) {
                     this.$alert('請至少選擇一種付款方式', '提示')
                    return;
                }

                let numberReg = /^[0-9]+.?[0-9]*$/

                if (!this.formData.price) {
                    this.$alert('請輸入單價', '提示')
                    return;
                }
                if (!numberReg.test(this.formData.price)) {
                    this.$alert('請輸入合法的單價或数量', '提示')
                    return;
                }
                if (!this.formData.min_money && this.formData.ad_type == 1) {
                    this.$alert('請輸入最小交易金額', '提示')
                    return;
                }
                
                if (!numberReg.test(this.formData.min_money) && this.formData.ad_type == 1) {
                    this.$alert('請輸入合法的最小交易金額', '提示')
                    return;
                }
                if (!this.formData.max_money) {
                    this.$alert('請輸入最大交易金额', '提示')
                    return;
                }
                if (!numberReg.test(this.formData.max_money) && this.formData.ad_type == 1) {
                    this.$alert('請輸入合法的最大交易金额', '提示')
                    return;
                }
                if (!this.formData.trade_limit && this.formData.ad_type == 1) {
                    this.$alert('請輸入付款期限', '提示')
                    return;
                }
                if (!numberReg.test(this.formData.trade_limit) && this.formData.ad_type == 1) {
                    this.$alert('請輸入合法的付款期限', '提示')
                    return;
                }
                let params = JSON.parse(JSON.stringify(this.formData))
                params.pay_type = params.pay_type.join(',')

                //后端要求值为null的参数不要
                let _v = {};
                let _adTypeOneKey = ['ad_type', 'record_type','coin_id','nation_id','pay_type','price','min_money','max_money','currency_id','trade_limit','trade_content','is_auth'];
                let _adTypeTwoKey = ['ad_type', 'record_type','coin_id','nation_id','pay_type','price','trade_content','is_auth','trade_limit','currency_id','cur_currency_id','cur_price'];
                
                let _t = this.formData.ad_type == 1 ? _adTypeOneKey : _adTypeTwoKey;

                _t.map(item => {
                    _v[item] = params[item]
                })

                CreateAd(_v)
                    .then(res => {
                        this.$alert('廣告發佈成功，是否繼續發佈廣告？', '提示', {
                            showCancelButton : true,
                            callback : action => {
                                if (action == 'cancel') {
                                    this.$router.push('/my-ads')
                                } else {
                                    this.formData.price = null;
                                    this.formData.min_money = 50;
                                    this.formData.max_money = 1000;
                                    this.formData.trade_limit = 15;
                                    this.formData.trade_content = null;
                                    this.formData.pay_type = [];
                                    this.formData.cur_currency_id = null;
                                    this.tipPrice = 0;

                                }
                            }
                        })
                    })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    //小屏
    @media screen and (max-width : 670px) {
        .choose-type {
            .form {
                padding: 20px;
            }
            .ad-type-radio {
                // display: inline;
                // .f-s();
                margin-bottom: 60px;
                .type-info {
                    margin-left: 20px;
                    h2 {
                        font-weight: bold;
                        font-size: 18px;
                        margin-bottom: 20px;
                    }
                    p {
                        font-size: 15px;
                        margin-bottom: 5px;
                        width: 90%;
                        white-space: normal;
                    }
                }
            }
            .el-button {
                width: 80%;
                margin: 30px;
            }
        }
        .step-one {
            .el-alert {
                margin: 15px 0;
            }
        }
        .step-item {
            h1 {
                font-size: 14px;
                color: #707987;
                margin-bottom: 15px;
            }
        }
        .el-step__head {
            margin-bottom: 10px;
        }
    }
    //大屏
    @media screen and (min-width : 670px) {
        .main-container {
            min-width: 1200px;
            margin: 25px auto;
            display: flex;
            justify-content: center;
            .main {
                width: 1140px;
                .el-col {
                    background: #fff;
                }
                .choose-type {
                    margin-right: 10px;
                    .form {
                        padding: 15px 40px;
                        .center {
                            font-size: 24px;
                            margin: 40px;
                            font-weight: bold;
                        }
                    }
                    // .el-radio {
                    //     .f-s();
                        
                    // }
                    .ad-type-radio {
                        // display: inline;
                        
                        .el-radio {
                            display: block;
                            .f-s();
                            margin-bottom: 30px;
                        }
                        
                        // margin-bottom: 60px;
                        .type-info {
                            margin-left: 20px;
                            h2 {
                                font-weight: bold;
                                font-size: 18px;
                                margin-bottom: 20px;
                            }
                            p {
                                font-size: 15px;
                                margin-bottom: 5px;
                            }
                        }
                    }
                    .next {
                        margin-bottom: 30px;
                    }
                }
            }
            .shuo-ming {
                padding: 15px 5px;
                h1 {
                    font-family: PingFang SC;
                    font-size: 18px;
                    font-weight: 600;
                    line-height: normal;
                    letter-spacing: normal;
                    color: #707987;
                    margin-bottom: 16px;
                }
                p {
                    font-family: PingFang SC,sans-serif;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 1.71;
                    letter-spacing: normal;
                    color: #707987;
                }
            }
        }
        .step-one {
            .el-alert {
                margin: 15px 0;
            }
        }
        .step-item {
            h1 {
                font-size: 14px;
                color: #707987;
                margin-bottom: 15px;
            }
        }
        .el-step__head {
            margin-bottom: 10px;
        }
        .ad-type-select {
            .s-b();
            .el-select:nth-child(2) {
                margin : 0 15px;
            }
        }
    }
</style>